<template>
	<view>
		<view class="cu-list menu sm-border">
			<view class="cu-item" @tap="navTo('/pages/userinfo/userinfo', 1)">
				<view class="content">
					<view class="title">个人资料</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="cu-item" @tap="navTo('/pages/userinfo/account', 1)">
				<view class="content">
					<view class="title">账户安全</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="cu-list menu sm-border margin-top-sm">
			<view class="cu-item" @tap="navTo('/pages/articleDetails/articleDetails?type=' + 8 + '&isoneArticle=' + true)">
				<view class="content">
					<view class="title">隐私政策</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="cu-item">
				<view class="content" @tap="navTo('/pages/articleDetails/articleDetails?type=' + 7 + '&isoneArticle=' + true)">
					<view class="title">服务协议</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="cu-item" @tap="navTo('/pages/feedback/feedback')">
				<view class="content">
					<view class="title">意见反馈</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="title">版本号</view>
				</view>
				<view class="action">
					<span>{{ appVersion }}</span>
				</view>
			</view>
			<view class="cu-item" @tap="navTo('/pages/articleDetails/articleDetails?type=9&isoneArticle=true')">
				<view class="content">
					<view class="title">关于我们</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="logOut text-red" @tap="logOut">退出登录</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
	data() {
		return {
			appVersion: ''
		};
	},
	computed: {
		...mapState(['userInfo', 'openid', 'hasLogin'])
	},
	components: {},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.appVersion = systemInfo.appVersion;
	},
	methods: {
		...mapActions(['Logout']),
		navTo(path, type) {
			uni.navigateTo({
				url: path
			});
		},
		logOut() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '你确定要退出登录吗？',
				success: function (res) {
					if (res.confirm) {
						that.exit();
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		exit() {
			this.Logout();
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background: #f0f0f0;
}

.cu-item span {
	text-align: right;
	color: #7c7c7c;
}

.tip {
	color: #8b8b8b;
	font-size: 28upx;
}

.avatar {
	width: 140upx;
	height: 140upx;
	margin: 10upx 0;

	image {
		border-radius: 100%;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border: 1px solid #19a967;
	}
}

.icp {
	position: absolute;
	bottom: calc(40upx + env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	text-align: center;
	color: #999;
}
.logOut {
	line-height: 100upx;
	text-align: center;
	background: #fff;
	font-size: 34upx;
	margin-top: 20upx;
}
</style>
